import React, { useTransition, useState } from "react";

const Spinner = () => {
  return <div>loading...</div>;
};

function App() {
  // 返回一个状态值表示过渡任务的等待状态，以及一个启动该过渡任务的函数。
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount((c) => c + 1);
    });
  }

  return (
    <div>
      {isPending && <Spinner />}
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}

export default App;
